<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style type="text/css">
      .grid {
        margin: auto;
        width: 530px;
        text-align: center;
      }
      .grid table {
        border-top: 1px solid #c2d89a;
        width: 100%;
        border-collapse: collapse;
      }
      .grid th,
      td {
        padding: 10;
        border: 1px dashed #f3dcab;
        height: 35px;
        line-height: 35px;
      }
      .grid th {
        background-color: #f3dcab;
      }
      .grid .book {
        padding-bottom: 10px;
        padding-top: 5px;
        background-color: #f3dcab;
      }
      .grid .total {
        height: 30px;
        line-height: 30px;
        background-color: #f3dcab;
        border-top: 1px solid #c2d89a;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <div class="grid">
        <h1>图书管理</h1>
        <div class="book">
          <div>
            <label for="id"> 编号： </label>

            <input type="text" id="id" v-model="id" disabled="false" v-focus />

            <label for="name"> 名称： </label>
            <input type="text" id="name" v-model="name" />
            <button @click="handle" :disabled="submitFlag">提交</button>
          </div>
        </div>
        <div class="total">
          <span>图书总数: </span>
          <span>{{total}}</span>
        </div>
        <table>
          <thead>
            <tr>
              <th>编号</th>
              <th>名称</th>
              <th>时间</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr :key="item.id" v-for="item in books">
              <td>{{item.id}}</td>
              <td>{{item.name}}</td>
              <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
              <td>
                <a href="" @click.prevent="toEdit(item.id)">修改</a>
                <span>|</span>
                <a href="" @click.prevent="deleteBook(item.id)">删除</a>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
      // 图书管理
      axios.defaults.baseURL = "http://localhost:3000/";

      Vue.directive("focus", {
        inserted: function (el) {
          el.focus();
        },
      });
      Vue.filter("format", function (value, arg) {
        function dateFormat(date, format) {
          if (typeof date === "string") {
            var mts = date.match(/(\/Date\((\d+)\)\/)/);
            if (mts && mts.length >= 3) {
              date = parseInt(mts[2]);
            }
          }
          date = new Date(date);
          if (!date || date.toUTCString() == "Invalid Date") {
            return "";
          }
          var map = {
            M: date.getMonth() + 1, //月份
            d: date.getDate(), //日
            h: date.getHours(), //小时
            m: date.getMinutes(), //分
            s: date.getSeconds(), //秒
            q: Math.floor((date.getMonth() + 3) / 3), //季度
            S: date.getMilliseconds(), //毫秒
          };
          format = format.replace(/([yMdhmsqS])+/g, function (all, t) {
            var v = map[t];
            if (v !== undefined) {
              if (all.length > 1) {
                v = "0" + v;
                v = v.substr(v.length - 2);
              }
              return v;
            } else if (t === "y") {
              return (date.getFullYear() + "").substr(4 - all.length);
            }
            return all;
          });
          return format;
        }
        return dateFormat(value, arg);
      });
      var vm = new Vue({
        el: "#app",
        data: {
          flag: false,
          submitFlag: false,
          id: "",
          name: "",
          books: [],
        },
        methods: {
          handle: async function () {
            if (this.flag) {
              axios
                .put("books/" + this.id, {
                  name: this.name,
                })
                .then((res) => {
                  this.queryData();
                })
                .catch((err) => {
                  console.error(err);
                });
            } else {
              var ret = await axios.post("books", { name: this.name });

              if (ret.status == 200) {
                this.queryData();
              }
            }
          },
          toEdit: function (id) {
            axios
              .get("books/" + id)
              .then((res) => {
                // console.log(res);
                this.id = res.data.id;
                this.name = res.data.name;
                this.flag = true;
              })
              .catch((err) => {
                console.error(err);
              });
          },
          deleteBook: function (id) {
            axios.delete("books/" + id).then((data) => {
              this.queryData();
            });
          },
          queryData: function () {
            this.books = axios.get("books").then((data) => {
              this.books = data.data;
            });
          },
        },
        computed: {
          total: function () {
            return this.books.length;
          },
        },
        watch: {
          name: function (val) {
            // 验证图书名称是否已经存在
            var flag = this.books.some(function (item) {
              return item.name == val;
            });
            if (flag) {
              // 图书名称存在
              this.submitFlag = true;
            } else {
              // 图书名称存在
              this.submitFlag = false;
            }
          },
        },
        mounted: function () {
          var that = this;
          axios
            .get("books")
            .then((res) => {
              // console.log(res.data);
              that.books = res.data;
            })
            .catch((err) => {
              console.error(err);
            });
        },
      });
    </script>
  </body>
</html>
